<template>
	<view class="container">
		<view class="header">快速加分-Designed By HuaZhi</view>
		<view class="activities">
			<view class="activity-title">可选加分活动</view>
			<checkbox-group @change="onCheckboxChange">
				<view class="activity" v-for="activity in activities" :key="activity.id">
					<label>
						<checkbox :value="activity.name" :checked="activity.name === selectedActivity">{{activity.name}}
						</checkbox>
					</label>
					<view style="display: flex;">
						<button class="edit-button" @click="editActivity(activity)">编辑</button>
						<button class="warn-button" @click="deleteActivity(activity)">删除</button>
					</view>
				</view>
			</checkbox-group>
			<button class="add-activity-button" @click="addActivity">新增分数项</button>
		</view>

		<view class="students-section">
			<view class="students-title">点击选中学生</view>
			<view class="selected-count">已选择{{ selectedStudents.length }}个</view>
			<view class="students">
				<view class="student" v-for="student in students" :key="student.userId"
					@click="toggleStudentSelection(student)"
					:class="{ selected: selectedStudents.includes(student.userId) }">
					{{ student.studentName }}
				</view>
			</view>
		</view>

		<view class="actions">
			<button class="action-button decrease" @click="openScorePopup('decrease')">我要减分</button>
			<button class="action-button increase" @click="openScorePopup('increase')">我要加分</button>
		</view>

		<view v-if="showScorePopup" class="score-popup" @click="closeScorePopup">
			<view class="score-popup-content" @click.stop>
				<view class="" align="center">
					直接点击即可加分
				</view>
				<view class="score-option" v-for="n in 5" :key="n" @click="selectScore(n * scoreChangeDirection)">
					{{ n * scoreChangeDirection }}分
				</view>
				<view class="score-input">
					<view class="">
						没有选项？自定义输入
					</view>
					<input type="number" v-model="inputScore" placeholder="输入分数" />
					<button @click="confirmInputScore">确定操作</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				activities: [],
				scoreAll: 0,
				selectedActivity: '',
				showScorePopup: false,
				scoreChangeDirection: 1,
				stuName: "",
				studentId: 0,
				activities2: [],
				scores: [],
				selectedStudents: [],
				students: [],
				customScore: 0, // 添加这一行
			};
		},
		onLoad(e) {
			this.students = JSON.parse(e.students);
		},
		created() {
			// 页面加载时从缓存中读取加分项
			const cachedActivities = uni.getStorageSync('activities');
			if (cachedActivities) {
				this.activities = JSON.parse(cachedActivities);
			} else {
				// 默认加分项
				this.activities = [{
						id: 1,
						name: '英语单词检查'
					},
					{
						id: 2,
						name: '数学做题情况'
					},
					
					{
						id: 3,
						name: '语文背诵检查'
					}
				];
				this.saveActivitiesToStorage();
			}
		},
		methods: {
			toggleStudentSelection(student) {
				const index = this.selectedStudents.indexOf(student.userId);
				if (index > -1) {
					this.selectedStudents.splice(index, 1);
				} else {
					this.selectedStudents.push(student.userId);
				}
			},
			onCheckboxChange(event) {
				this.activities2 = event.detail.value;
				if (event.detail.value.length > 1) {
					uni.showToast({
						title: "请选择一个标签"
					});
					return;
				} else {
					this.selectedActivity = event.detail.value[0]; // 获取选中的第一个值
				}
			},
			saveActivitiesToStorage() {
				// 将加分项存入缓存
				uni.setStorageSync('activities', JSON.stringify(this.activities));
			},
			editActivity(activity) {
				const newName = prompt('编辑活动名称:', activity.name);
				if (newName) {
					const index = this.activities.findIndex(a => a.id === activity.id);
					if (index !== -1) {
						this.activities[index].name = newName;
						this.saveActivitiesToStorage(); // 更新后保存到缓存
					}
				}
			},
			deleteActivity(activity) {
				this.activities = this.activities.filter(a => a.id !== activity.id);
				if (this.selectedActivity === activity.name) {
					this.selectedActivity = '';
				}
				this.saveActivitiesToStorage(); // 删除后保存到缓存
			},
			addActivity() {
				const newActivity = prompt('请输入新的分数项名称:');
				if (newActivity) {
					this.activities.push({
						id: this.activities.length + 1,
						name: newActivity
					});
					this.saveActivitiesToStorage(); // 添加后保存到缓存
				}
			},
			openScorePopup(direction) {
				this.scoreChangeDirection = direction === 'increase' ? 1 : -1;
				this.showScorePopup = true;
			},
			closeScorePopup() {
				this.showScorePopup = false;
			},
			confirmInputScore() {
				const amount = parseInt(this.inputScore, 10);
				if (isNaN(amount) || amount <= 0) {
					uni.showToast({
						title: "请输入有效的分数"
					});
					return;
				}
				this.selectScore(amount * this.scoreChangeDirection);
			},
			
			selectScore(amount) {
				let role = 1;
				if (amount < 0) {
					role = 0;
					amount = -amount;
				}
				if (!this.selectedActivity) {
					uni.showToast({
						title: "请选择一个标签"
					});
					return;
				}
				if (this.activities2.length > 1) {
					uni.showToast({
						title: "请最多选择一个标签"
					});
					return;
				}

				// 构建选中学生的信息列表
				const selectedStudentsInfo = this.selectedStudents.map(id => {
					const student = this.students.find(s => s.userId === id);
					return {
						studentId: student.userId,
						studentName: student.studentName
					};
				});

				uni.request({
					url: `${globalVariable}/updateScoreS`,
					method: 'POST',
					data: {
						students: selectedStudentsInfo,
						score: amount,
						scoreName: this.selectedActivity,
						role: role
					},
					success: (res) => {
						this.showScorePopup = false;
						uni.showToast({
							title: res.data.message
						});
						if (role === 1) {
							this.scoreAll += amount;
						} else {
							this.scoreAll -= amount;
						}
						this.scores.push({
							"scoreName": this.selectedActivity,
							"role": role,
							"score": amount
						});
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
	}

	.header {
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
		color: #333;
	}

	.activities,
	.students-section {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.activity-title,
	.students-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.activity,
	.student {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.edit-button,
	.warn-button,
	.add-activity-button,
	.action-button {
		color: #fff;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;
	}

	.edit-button {
		background-color: #4caf50;
	}

	.warn-button {
		background-color: #df282b;
		margin-left: 10px;
	}

	.add-activity-button {
		background-color: #2196f3;
		width: 100%;
		text-align: center;
	}

	.actions {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;
	}

	.action-button {
		width: 48%;
		padding: 10px 0;
		font-size: 16px;
	}

	.decrease {
		background-color: #f44336;
	}

	.increase {
		background-color: #4caf50;
	}

	.students {
		display: flex;
		flex-wrap: wrap;
	}

	.student {
		flex: 0 0 calc(33.33% - 10px);
		/* 每行三个学生 */
		margin: 5px;
		padding: 10px;
		border: 1px solid #ccc;
		cursor: pointer;
		box-sizing: border-box;
		/* 包含内边距和边框 */
		border-radius: 10px;
		display: flex;
		justify-content: center;
	}

	.student.selected {
		background-color: #d0ebff;
	}


	.score-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.score-popup-content {
		background: #fff;
		padding: 20px;
		border-radius: 10px;
		/* display: flex; */
		justify-content: space-around;
		width: 80%;
	}

	.score-option {
		background: #37c0ff;
		color: #fff;
		padding: 10px 20px;
		border-radius: 10px;
		cursor: pointer;
		font-size: 16px;
		text-align: center;
		margin: 10px;
	}
	
	.score-input {
	    margin-top: 10px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
		width: 100%;
		background-color: #dbf3e0;
		border-radius: 10px;
	}
	
	.score-input input {
	    /* width: 100px; */
		width: 80%;
	    padding: 5px;
	    border-radius: 5px;
	    border: 1px solid #ccc;
	    margin-bottom: 10px;
	}
	
	.score-input button {
	    background-color: #4caf50;
	    color: #fff;
	    border: none;
	    padding: 5px 10px;
	    border-radius: 5px;
	    cursor: pointer;
	}

</style>